<template>
  <div class="parameter-form">
    <div style="margin-top: 10px;display: flex;">
      <div class="label-width">网格</div><input type="text" v-model="form.size">米
    </div>
    <div style="margin-top: 10px;display: flex;">
      <div class="label-width">长</div><input type="text" v-model="form.long">个
    </div>
    <div style="margin-top: 10px;display: flex;">
      <div class="label-width">宽</div><input type="text" v-model="form.width">个
    </div>
    <div style="margin-top: 10px;display: flex;">
      <div class="label-width">高</div><input type="text" v-model="form.high">个
    </div>
  </div>
</template>

<script setup>
import DrawPlane from "./DrawPlane.js";
const form = { long: 10, width: 10, high: 0, size: 15 }
const initForm = (viewer) => {
  const dp = new DrawPlane(viewer)
  dp.drawPlane(10)
}
// 暴露方法
defineExpose({ initForm })
</script>

<style scoped lang="scss">
.parameter-form {
  width: 400px;
  height: 200px;
  background-color: black;
  opacity: 0.5;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 99;
  border-radius: 10px;
  color: #fff;

  .label-width {
    width: 45px;
    margin-left: 10px;
  }

  input {
    width: 50px;
  }
}
</style>